<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/> -->
    <meta name="viewport" content="width=640,user-scalable=0,target-densitydpi=device-dpi">
<title>凡哥婚礼</title>
<style type="text/css">
    html {
        height: 100%;
    }
    body {
        padding: 0;
        margin: 0;
        text-align: center;
        width: 100%;
        height: 100%;
    }
    #img {
        width: 100%;
        position: absolute;
        margin: auto;
        left: 0;
        right:0;
        top: 0;
        bottom:0;
    }
</style>
<body>
    <img src="" id="img" />
    <script>

    var imageList = [];
    var ajaxConfigFixed = {};
    var isfirst = true;

    setInterval((function() {
        ajax({
            url: 'api.php?image=1',
            success: function(res) {
                imageList = res.items;
                if(isfirst) {
                    getEl('img').src = imageList[Math.floor(Math.random()*(imageList.length-1))];
                    isfirst = false;
                }
            }
        });
        return arguments.callee;
    })(),2*60*1000);

    setInterval(function() {
        if(imageList.length > 0) {
            getEl('img').src = imageList[Math.floor(Math.random()*(imageList.length-1))];
        }
    },10*1000);

    function getEl(id) {
        return document.getElementById(id);
    }

       function ajax(config) {

           var params = config.params || [],req;
           if(typeof params === 'object') {
               var p = [];
               for(var k in params) {
                   p.push(encodeURIComponent(k)+'='+encodeURIComponent(params[k]));
               }
               params = p;
           }
           var url = config.url || '';
           if(config.form) {
               var frm = typeof(config.form) == 'string' ? document.getElementById(config.form) : config.form;
               url = url || frm.action;
               for(var i=0,len = frm.elements.length; i < len; i++) {
                   el = frm.elements[i];
                   if(el.tagName.toUpperCase() == 'SELECT') {
                       var v = el.options[el.selectedIndex].value;
                       if(el.name) {
                           params.push(encodeURIComponent(el.name) +'='+ encodeURIComponent(v));
                       }
                   } else if(el.name && ((el.type !='radio'&&el.type != 'checkbox') || el.checked)) {
                       if(el.dataset['validate']) {
                           if(!checkValidate(el.value,el.dataset['validate'])) {
                               alert(el.dataset['errmsg']);
                               return;
                           }
                       }
                       params.push(encodeURIComponent(el.name) +'='+ encodeURIComponent(el.value));
                   }
               }
           }

           function checkValidate(val,reg) {
               var validateRegex = {
                   'required' : /^.+$/,
                   'phone' : /^1\d{10}$/,
                   'smscode': /^\d{6}$/,
                   'zipcode': /^\d{6}$/,
               }
               var regex = validateRegex[reg];
               if(!regex) {
                   regex = new RegExp(reg);
               }
               return regex.test(val);
           }

           if(url.indexOf('?')>-1){ url += '&timestamp='+new Date().valueOf(); }else{ url += '?timestamp='+new Date().valueOf(); }

           if(ajaxConfigFixed[url]) {
               return;
           }
           ajaxConfigFixed[url] = 1;
           function sendRequest(url,postData,config) {
               req = createXMLHTTPObject();
               if (!req) return;
               var method = (postData) ? "POST" : "GET";
               req.open(method,url,true);
               req.setRequestHeader('User-Agent','XMLHTTP/1.0');
               if (postData)
                   req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
               req.onreadystatechange = function () {
                   if (req.readyState != 4) return;
                   if (req.status != 200 && req.status != 304) {
                       return;
                   }
                   ajaxConfigFixed[url] = 0;
                   (typeof(config.mask) != 'undefined') && config.mask.zmunmask && config.mask.zmunmask();
                   var res = eval('('+req.responseText+')');
                   if(config.callback) {
                       config.callback(res);
                   }
                   if(res.success) {
                       config.success && config.success(res);
                   } else {
                       (config.failure || function(res) {alert(res.detail);})(res);
                   }
               };
               if (req.readyState == 4) return;
               req.send(postData);
           }

           var XMLHttpFactories = [
               function () {return new XMLHttpRequest()},
               function () {return new ActiveXObject("Msxml2.XMLHTTP")},
               function () {return new ActiveXObject("Msxml3.XMLHTTP")},
               function () {return new ActiveXObject("Microsoft.XMLHTTP")}
           ];

           function createXMLHTTPObject() {
               var xmlhttp = false;
               for (var i=0;i<XMLHttpFactories.length;i++) {
                   try {
                       xmlhttp = XMLHttpFactories[i]();
                   }
                   catch (e) {
                       continue;
                   }
                   break;
               }
               return xmlhttp;
           }
           sendRequest(url,params.join('&'),config);
           return req;
       }
    </script>
</body>
</html>
